<template>
  <!-- 注册页面 -->
  <div class="view-page">
    <module-header></module-header>
    <div class="regist-box">
      <div class="title-box">
        <span class="title">注册</span>
      </div>
      <!-- ele form 表单 -->
      <el-form
        label-position="top"
        :model="registForm"
        class="regist-form"
        :rules="registRules"
        ref="registForm"
        label-width="50px"
        label-height="30px"
      >
        <p class="label-hint">手机号码</p>
        <div class="phone-box">
          <div
            class="select-box"
            :class="regionShow?'select-focus':''"
            @click="regionShow=!regionShow"
          >
            <span class="select-value">+{{telephoneCode}}</span>
            <i class="el-icon-caret-bottom select-icon"></i>
          </div>
          <el-form-item prop="tel">
            <el-input placeholder="请输入内容" v-model="registForm.tel" class="input"></el-input>
          </el-form-item>
          <!-- 区号-列表 -->
          <GeminiScrollbar class="country-box" v-show="regionShow">
            <p
              class="region-list"
              v-for="(item,index) in regionList"
              :key="index"
              @click="item.enable?regionSelect(item.telephoneCode):''"
              :class="item.enable?'':'dis-option'"
            >
              <span class="hint">{{item.displayName}}&nbsp;{{item.enable?'':'暂不支持'}}</span>
              <span class="code">{{item.telephoneCode}}</span>
            </p>
          </GeminiScrollbar>
        </div>
        <p class="label-hint">验证码</p>
        <el-form-item class="phone-item" prop="code">
          <el-input v-model="registForm.code">
            <button slot="suffix" class="get-code-btn" ref="code" @click="getCode">获取验证码</button>
          </el-input>
        </el-form-item>
        <p class="label-hint">密码</p>
        <el-form-item prop="psw">
          <el-input v-model="registForm.psw" show-password></el-input>
        </el-form-item>
        <p class="label-hint">确认密码</p>
        <el-form-item prop="psws">
          <el-input v-model="registForm.psws" show-password></el-input>
        </el-form-item>
        <el-form-item prop="checkbox">
          <p class="agreement-row">
            <i
              class="iconfont"
              :class="agreement?'icon-check-box':'icon-checkbox'"
              @click="agreement=!agreement"
            ></i>我已阅读并理解
            <router-link to>隐私政策与声明</router-link>
          </p>
        </el-form-item>
        <el-button class="regist-btn" @click="registClick()">注册</el-button>
      </el-form>
    </div>

    <module-footer></module-footer>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
export default {
  data() {
    return {
      telephoneCode: "86",
      agreement: false,
      regionShow: false,
      regionList: [],
      registForm: {
        region: "",
        tel: "",
        code: "",
        psw: "",
        psws: ""
      },
      registRules: {
        region: [{}],
        tel: [
          {
            validator: (rule, value, callback) => {
              var myReg = /^1[123456789]\d{9}$/;
              if (!value) {
                callback(new Error("请输入手机号码"));
                callback();
              } else if (myReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号码"));
              }
            },
            trigger: "blur"
          }
        ],
        code: [
          {
            validator: (rule, value, callback) => {
              var myReg = /^[0-9]*$/;

              if (!value) {
                callback(new Error("请输入验证码"));
                callback();
              } else if (myReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的验证码"));
              }
            },
            trigger: "blur"
          }
        ],
        psw: [
          {
            validator: (rule, value, callback) => {
              var myReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
              if (value) {
                if (myReg.test(value)) {
                  callback();
                } else {
                  callback(new Error("密码必须是6-16位字母数字组合"));
                }
              } else {
                callback(new Error("请输入密码"));
              }
            },
            trigger: "blur"
          }
        ],
        psws: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                if (this.registForm.psw == this.registForm.psws) {
                  callback();
                } else {
                  callback(new Error("两次密码不一致"));
                }
              } else {
                callback(new Error("请输入确认密码"));
              }
            },
            trigger: "blur"
          }
        ],
        checkbox: [
          {
            validator: (rule, value, callback) => {
              if (this.agreement) {
                callback();
              } else {
                callback(new Error("请认真阅读并勾选法律条款"));
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: {
    ModuleHeader,
    ModuleFooter
  },
  methods: {
    /*
     *@description 区号数据的加载
     */
    reqRegion() {
      this.$api.util.utilRegion().then(res => {
        if (res.data.code == 200) {
          if (res.data.data) {
            let data = res.data.data.regionlist;
            let arr = [];
            for (const el in data) {
              arr = arr.concat(data[el]);
            }
            this.regionList = arr;
          }
        }
      });
    },
    /*
     *@description 区号点击
     */
    regionSelect(code) {
      this.telephoneCode = code;
      this.registForm.region = code;
      this.regionShow = !this.regionShow;
    },
    /*
     *@descript 获取手机验证码
     */
    getCode() {
      let e = this.$refs.code;
      let myReg = /^1[345678]\d{9}$/;
      if (myReg.test(this.registForm.tel)) {
        let text = e.innerText;
        // e.innerText = 123;
        var wait = 60;
        function time(o, _this) {
          if (wait == 0) {
            o.removeAttribute("disabled");
            o.innerText = "获取验证码";
            wait = 60;
          } else {
            o.setAttribute("disabled", true);
            o.innerText = `重新发送 (${wait})`;
            wait--;
            setTimeout(function() {
              time(o, _this);
            }, 1000);
          }
        }
        time(e, this);
        //  在这里获取手机验证码
        let param = {
          Mobile: this.registForm.tel,
          SendType: 1,
          MobileArea: this.registForm.region
        };
        this.$api.util.utilTelCode(param).then(res => {
          if (res.data.code == 200) {
            this.$message.success(
              res.data.msg + ",您的验证码( " + res.data.data.code + " )"
            );
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        this.$message.error("请输入正确的手机号码");
      }
    },
    /*
     *@description 注册按钮点击
     */
    registClick() {
      let _this = this;
      _this.$refs.registForm.validate(function(va, ob) {
        if (va) {
          let param = {
            region: _this.registForm.region,
            tel: _this.registForm.tel,
            code: _this.registForm.code,
            psw: _this.registForm.psw,
            psws: _this.registForm.psw
          };
          _this.$api.user.regist(param).then(res => {
            if (res.data.code == 200) {
              _this.$message.success(res.data.msg);
              _this.$refs.registForm.resetFields();
            } else {
              _this.$message.error(res.data.msg);
            }
          });
        } else {
          _this.$message.error("请确认表单信息无误");
        }
      });
    }
  },

  computed: {},

  created() {
    this.reqRegion();
  },

  mounted() {}
};
</script>
<style lang="less" scoped>
.b {
  border: solid 1px red;
}
.view-page {
  background-color: #05193d;
  .regist-box {
    width: 464px;
    margin: 3% auto;
    padding: 24px 32px;
    background-color: #ffffff;
    border-radius: 4px;
    .title-box {
      width: 100%;
      .title {
        color: #666;
        font-weight: 400;
        font-size: 32px;
        height: 44px;
        line-height: 44px;
        display: inline-block;
      }
    }
    .regist-form {
      margin-top: 25px;
      .label-hint {
        font-size: 14px;
        font-weight: 400;
        color: rgba(213, 215, 216, 1);
        line-height: 20px;
        margin: 7px 0 7px 0;
      }

      .phone-box {
        display: flex;
        width: 400px;
        justify-content: space-between;
        position: relative;
      }
      .input {
        width: 296px;
      }
      .select-box {
        width: 88px;
        height: 40px;
        padding-left: 12px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        position: relative;
        cursor: pointer;
      }

      .select-value {
        width: 50px;
        font-size: 12px;
      }
      .select-icon {
        color: rgba(0, 0, 0, 0.25);
        font-size: 12px;
        right: 14px;
        position: absolute;
        right: 5px;
      }
      .get-code-btn {
        border: none;
        height: 38px;
        color: #c0c4cc;
        cursor: pointer;
        background-color: #fff;
      }
      .dis-option {
        color: rgb(196, 197, 201) !important;
        background-color: #faf9f9;
        cursor: not-allowed;
        cursor: no-drop;
        pointer-events: none;
      }
      .dis-option:hover {
        background-color: #faf9f9;
        cursor: not-allowed;
        pointer-events: none;
      }
      //   选中的样式
      .select-focus {
        outline: 0;
        box-shadow: 0 0 0 0.5px rgba(16, 142, 233, 0.2);
        border: 1px solid #3075ee;
        .select-icon {
          transform: rotate(180deg);
        }
      }
      .country-box {
        position: absolute;
        top: 42px;
        width: 400px;
        height: 310px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        z-index: 1019;
        background-color: #fff;
        .region-list {
          line-height: 40px;
          margin: 0px;
          display: flex;
          justify-content: space-between;
          padding: 0 15px 0 10px;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          .code {
            color: rgb(163, 159, 159);
          }
        }
        .region-list:hover {
          background-color: #f4f8fe;
        }
      }
      //协议line
      .agreement-row {
        font-size: 12px;
        .iconfont {
          color: gray;
          font-size: 12px;
          display: inline-block;
          width: 14px;
          height: 14px;
          cursor: pointer;
          margin-top: 2px;
          vertical-align: top;
        }
        a {
          color: #3075ee;
        }
        .icon-check-box {
          color: #3075ee;
        }
      }
      // 注册按钮
      .regist-btn {
        width: 100%;
        margin: 15px 0;
        font-size: 18px;
      }
    }
  }
}
</style>
